import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useEffect, useRef, useState } from 'react';
import { Button, Col, Form, Input, Row, Select, Space, Table, message } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import '../common/styles.less';
import { IntentProjectColumns } from '../mconfig';
import Cls from 'classnames';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';
import { onCloseModalCommon } from '@/utils';
import { ApplyManageService } from '../services';

export const SelectApplyModal = ({ curRes, onSave, onClose }) => {
  const prefixCls = 'apply-selectproject'; /** 样式类名 */
  const projectRef: Ref<IOneModalRef> = useRef(null); /** 弹框Ref */
  const [searchForm] = Form.useForm(); /** 表单Ref */
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); /** 表格选中行的key */
  const [selectedRows, setSelectedRows] = useState<Record<string, any>[]>([]); /** 表格选中行内容 */

  /** 采购申请 */
  const { applyManageRun, applyManageDataSource, applyManageLoading, applyManageTableProps } = ApplyManageService(curRes).getApplyManageService();

  const getTableData = (obj = {}) => {
    applyManageRun({ current: 1, pageSize: 10, ...obj, bidOpenFlag: 1 });
  };

  useEffect(() => {
    getTableData();
  }, []);

  /** 确定按钮 */
  const onConfirm = () => {
    if (selectedRows?.length) {
      onSave(selectedRows);
      onCloseModalCommon(projectRef);
    } else {
      message?.warn('请选择采购项目!');
    }
  };

  /** 搜索按钮 */
  const onSearch = () => {
    getTableData(searchForm?.getFieldsValue());
  };

  /** 重置按钮 */
  const onReset = () => {
    searchForm.resetFields();
    getTableData();
  };

  /** 表格分页 */
  const onTablePageChange = (current, pageSize, params) => {
    getTableData({ pageSize, current, ...params, ...searchForm.getFieldsValue() });
  };

  /** 表格单选框配置 */
  const rowSelection: any = {
    selectedRowKeys,
    onChange: (selectedRowKeys: React.Key[], selectedRows: Record<string, any>[]) => {
      setSelectedRowKeys(selectedRowKeys);
      setSelectedRows(selectedRows);
    },
    type: 'radio',
  };
  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={projectRef}
      title={'采购项目'}
      width={1200}
      onCancel={onClose as any}
      onOk={onConfirm}
      centered
      bodyStyle={{
        padding: 0,
        height: 600,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      <div className={prefixCls + '-formBoxDiv'}>
        <Form form={searchForm}>
          <Row gutter={[16, 16]}>
            <Col span={4}>
              <Form.Item name={'applyTitle'}>
                <Input placeholder="申请名称" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item name={'supplyWay'}>
                <Select
                  placeholder="标的来源"
                  options={[
                    { label: '月度计划', id: '0', value: '0' },
                    { label: '零星采购', id: '1', value: '1' },
                    { label: '实验平台', id: '2', value: '3' },
                  ]}
                />
              </Form.Item>
            </Col>
            <Col span={16} className={prefixCls + '-formBoxDiv-handleBtn'}>
              <Space>
                <Button type="primary" onClick={onSearch} icon={<SearchOutlined />}>
                  查询
                </Button>
                <Button onClick={onReset} icon={<ReloadOutlined />}>
                  重置
                </Button>
              </Space>
            </Col>
          </Row>
        </Form>
      </div>
      <div className={Cls(prefixCls + '-TableBoxDiv', 'list-table')}>
        <Table
          columns={IntentProjectColumns()}
          size="small"
          bordered
          scroll={{ x: 800, y: 'true' }}
          dataSource={applyManageDataSource || []}
          rowSelection={rowSelection}
          loading={applyManageLoading}
          rowKey={'id'}
          pagination={{
            ...(applyManageTableProps?.pagination as any),
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: commonPageSizeOptions,
            showTotal: showTotalInfo,
            onChange: onTablePageChange as any,
          }}
          onRow={(record) => {
            return {
              onClick: () => {
                setSelectedRowKeys([record?.id]);
                setSelectedRows([record]);
              },
            };
          }}
        />
      </div>
    </OneModal>
  );
};
